<template>
  <div class="container">
  	<!-- <h1 class="title">岳西县保安登记系统</h1> -->
    <div class="logo"><img src="../assets/logo.png" alt=""></div>
  	<form>
      <div class="input-group">
        <div class="input-group-item w300">
          <span class="label1">姓名：</span>
          <span class="value">{{IDinfo.name}}</span>
        </div>
      	<div class="input-group-item">
          <span class="label1">性别：</span>
          <span class="value">{{IDinfo.sex}}</span>
        </div>
        <div class="input-group-item" style="margin-left:119px;">
         <span class="label1">民族：</span>
         <span class="value">{{IDinfo.nation}}</span>
       </div>
      </div>

      <div class="input-group">
        <div class="input-group-item w300">
          <span class="label1">年龄：</span>
          <span class="value">{{age}}</span>
        </div>
        <div class="input-group-item">
          <span class="label1">身份证：</span>
          <span class="value">{{IDinfo.id_card}}</span>
        </div>
      </div>

      <div class="input-group">
       <div class="input-group-item">
         <span class="label1">地址：</span>
         <span class="value">{{IDinfo.addr}}</span>
       </div>
      </div>

      <div class="input-group">
       <div class="input-group-item">
         <span class="label1">现住址：</span>
         <span class="value">{{now_addr}}</span>
       </div>
      </div>

      <div class="input-group">
        <div class="input-group-item">
          <span class="label">手机号：</span>
          <input class="large" type="text" name="phone" v-model="phone">
        </div>
      	<div class="input-group-item" style="margin-left:116px">
          <span class="label">拟应聘岗位：</span>
          <select v-model="job">
            <option value="保安">保安</option>
            <option value="收费员">收费员</option>
          </select>
        </div>
      </div>

      <div class="input-group">
        <div class="input-group-item">
          <span class="label">推荐人：</span>
          <input class="large" type="text" name="to_name" v-model="to_name">
        </div>
      	<div class="input-group-item" style="margin-left:116px">
          <span class="label" style="margin-right: 52px;">文化程度：</span>
          <select v-model="education">
            <option value="小学">小学</option>
            <option value="初中">初中</option>
            <option value="高中">高中</option>
            <option value="专科">专科</option>
          </select>
        </div>
      </div>

      <div class="input-group">
      	<span class="label">工作经历：</span>
      	<textarea name="work_experience" rows="4" v-model="work_experience"></textarea> 
      </div>
       
  	</form>

    <div style="padding-top:27px;"><button class="submit" @click="onSubmit">提交资料</button></div>

    <dialog-bar v-model="sendVal" type="confirm" title="提示信息" :content="content"  @confirm="clickConfirm()"></dialog-bar>

  </div>
</template>

<script>
  import dialogBar from '../components/dialog.vue'
  export default {
    components:{
        'dialog-bar': dialogBar
    },
    name:"index",
    data(){
      return {
        sendVal: false, // 是否显示弹窗
        content: '',
        IDinfo: {
          name:'张三',
          sex:'男',
          nation:'汉',
          id_card:'340828199009050119',
          addr:'安徽省岳西县天堂镇花湖组天堂镇花湖组乱花村互通乱花村互通', 
        },
        now_addr:'岳西县天馨电商园三楼',
        age: 19,
        phone:'',
        to_name:'',
        job:'保安',
        education:'小学',
        work_experience:''
      }
    },

    created() {
      this.age = this.getAge(this.IDinfo.id_card)
    },

    methods: {
        clickConfirm(){
            console.log('点击了confirm');
            if(this.content == '资料提交成功！') {
              this.$router.push('/welcome')
            }
        },

        getAge(UUserCard){
           var myDate = new Date();
           var month = myDate.getMonth() + 1;
           var day = myDate.getDate();
           var age = myDate.getFullYear() - UUserCard.substring(6, 10) - 1;
           console.log(month,day,age)
           console.log('身份证年份',UUserCard.substring(6, 10))
    if (UUserCard.substring(10, 12) < month || UUserCard.substring(10, 12) == month && UUserCard.substring(12, 14) <= day) {
        age++;
    }
    
     return age;
        },
   
      onSubmit() {
        let that = this;
        let params = {};

      console.log('前',that.IDinfo)
        // 循环身份证信息，判断是否为空
        for(let key in that.IDinfo){
          params[key] = that.IDinfo[key];
          console.log(that.IDinfo[key])
          if(that.IDinfo[key] =='') {
            that.sendVal = true;
            that.content = '带*的选项不能为空';
            return;
          }
        }

        if( !(/^1[3456789]\d{9}$/.test(that.phone)) ){ 
          that.sendVal = true; 
          that.content = '手机号有误，请重填';
          return; 
        } 

        params['phone'] = that.phone;
        params['to_name'] = that.to_name;
        params['work_experience'] = that.work_experience;
        params['job'] = that.job;
        params['education'] = that.education;
        console.log('params',params)
        
        console.log('后IDinfo',that.IDinfo)

        // 提交资料
        this.$api.post('/index/index/visitor', params , r => {
        console.log('提交结果',r)
          if(r.code == 1){
            that.sendVal = true; 
            that.content = '资料提交成功！';
            
          }
      })

      }

    }
  }
</script>

<style scoped>
 
  .title{
    margin-bottom: 60px;
    color: #fff;
  }
  .input-group{
    width: 1000px;
    margin-bottom: 2%;
  /*  height: 42px;*/
    line-height: 42px;
    margin-left: 80px;
    overflow: hidden;
  }

    .input-group .label1{
    float: left;
    width: 120px;
    height: 42px;
    font-size: 26px;
    font-weight: bold;
    text-align: left;
    color: #fff;
  }
 
  .input-group .label{
    float: left;
    height: 42px;
    font-size: 26px;
    font-weight: bold;
    margin-right: 26px;
    text-align: left;
    color: #fff;
  }
  .input-group input {
    float: left;
    width: 200px;
    height: 38px;
    line-height: 42px;
    padding-left: 10px;
    font-size: 26px;
    outline: 0;
    border: 1px solid #476fb1;
    border-radius: 3px;
    box-shadow: 1px 3px 5px #5b84d3;
  }
  .input-group input:disabled {
    background: #fff;
  }
 
  textarea{
    float: left;
    width: 620px;
    padding: 7px;
    font-size: 18px;
    border: 1px solid #12629d;
    border-radius: 3px;
    box-shadow: 1px 3px 5px #5b84d3;
    outline: 0;
  }

 .input-group-item{
    float: left;
  }
   .input-group .input-group-item input{
    width: 135px;
  }
   .input-group .input-group-item input.large{
    width: 200px;
  }

  .input-group-item .value{
    float: left;
    font-size: 26px;
    font-weight: bold;
    color: #fff;
    text-align: left;
  }
  .w300{
    width: 270px;
  }

  select{
    height: 42px;
     width: 150px;
     font-size: 26px;
     border-radius: 3px;
  }
 
</style>